<template>
<div class="order-list-container">
  <div v-if="orders.length === 0" class="empty-box">
    <i class="iconfont icon-order-empty empty-icon"></i>
    <span class="empty-text">没有订单记录</span>
    <router-link to="/goodlist" class="go-shopping-btn">去逛逛</router-link>
  </div>
  <div v-else class="orders-wrapper">
    <order-item v-for="order in orders" :order="order" :key="order.id" class="order-card"></order-item>
  </div>
</div>
</template>

<script>
import OrderItem from "@/components/OrderItem";
import API from "@/utils/request";
export default {
  name: "OrderList",
  components:{
    'order-item': OrderItem,
  },
  data() {
    return{
      orders: {},
    }
  },
  created() {
    API.get("/userid").then(res=>{
      API.get("/api/order/userid/"+ res).then(res=>{
        if(res.code==='200'){
          this.orders = res.data;
          for(var i = 0; i < this.orders.length; ++i) {
            this.orders[i].create_time = this.orders[i].create_time.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
          }
        }
      })
    })
  }
}
</script>

<style scoped>
.order-list-container{
  width: 100%;
  max-width: 100%;
  margin: 20px auto;
}

.empty-box{
  border-radius: 30px;
  text-align: center;
  background-color: white;
  padding: 100px;
}

.empty-icon{
  font-size: 40px;
  color: #ccc;
}

.empty-text{
  display: block;
  margin-top: 10px;
  font-size: 16px;
  color: #666;
}

.go-shopping-btn{
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #ff6700;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

.orders-wrapper{
  display: block;
  width: 100%;
}

.order-card{
  width: 100%;
  margin-bottom: 16px;
}
</style>